<template>
  <div class="shift-detail">
    <div class="title mb10">
      <span>轮班详情</span>
      <el-button size="mini" @click="save">保存</el-button>
    </div>
    <div class="close" @click="handleClose">
      <i class="el-icon-close" />
    </div>
    <div class="main">
      <el-form
        ref="form"
        class="shift-form"
        :model="form"
        :rules="rules"
        label-position="top"
        size="small"
        hide-required-asterisk
      >
        <el-form-item label="轮班编号" prop="bh">
          <el-input
            type="text"
            v-model="form.bh"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="组织" prop="org">
          <el-select v-model="form.org">
            <el-option
              v-for="item in orgOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车间" prop="cj">
          <el-select v-model="form.cj">
            <el-option
              v-for="item in cjOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工序" prop="gongxu">
          <el-select v-model="form.gongxu">
            <el-option
              v-for="item in gxOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班制" prop="shiftType">
          <el-select v-model="form.shiftType">
            <el-option
              v-for="item in bzOption"
              :key="item.id"
              :label="item['shiftType']"
              :value="item['shiftType']"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="起始班次" prop="bcInit">
          <el-select v-model="form.bcInit">
            <el-option
              v-for="item in bcOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设定开始时间" prop="startTime">
          <el-date-picker
            size="small"
            v-model="form.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions1"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设定结束时间" prop="endTime">
          <el-date-picker
            size="small"
            v-model="form.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="shift-table" v-loading="loading">
        <div class="item" v-for="(day, i) in list" :key="i">
          <div class="th">
            <h3>第{{ i + 1 }}天</h3>
            <h3>{{ day.date | dateFilter }}</h3>
            <div class="time">
              <span>0</span><span>4</span><span>8</span><span>12</span
              ><span>16</span><span>20</span><span>24</span>
            </div>
          </div>
          <div class="td">
            <div
              v-for="(item, index) in day.arr"
              :key="index"
              class="plan"
              :class="{ blue: item.bc == '甲班', purple: item.bc == '乙班' }"
            >
              <el-row type="flex" justify="space-between">
                <el-col style="color: #182236">{{ item.bc }}</el-col>
                <span style="color: #48556a">{{ item.diff }}H</span>
              </el-row>
              <div style="white-space: nowrap">
                ({{ item.start }}-{{ item.end }})
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { updateShift, getShiftDetail } from '@/api/shifts';
export default {
  props: ['bzOption'],
  data() {
    return {
      form: {
        bcInit: '',
        cj: '',
        endTime: '',
        gongxu: '',
        org: '',
        shiftType: '',
        startTime: ''
      },
      rules: {
        cj: [{ required: true, message: '请选择车间', trigger: 'change' }],
        org: [{ required: true, message: '请选择组织', trigger: 'change' }],
        gongxu: [{ required: true, message: '请选择工序', trigger: 'change' }],
        bcInit: [
          { required: true, message: '请选择起始班次', trigger: 'change' }
        ],
        shiftType: [
          { required: true, message: '请选择班制', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择起始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      pickerOptions: {
        disabledDate: time => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime();
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.form.endTime) {
            let date = moment(this.form.endTime).valueOf();
            return time.getTime() >= date;
          }
        }
      },
      list: [],
      loading: false
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    },
    orgOption() {
      return this.$store.getters.orgOption;
    },
    gxOption() {
      return this.$store.getters.gxOption;
    },
    bcOption() {
      return this.$store.getters.bcOption;
    }
  },
  filters: {
    dateFilter: function(val) {
      if (val) {
        return `${val} | ${moment(val)
          .locale('zh-cn')
          .format('dddd')}`;
      }
    }
  },
  methods: {
    show(record) {
      let form = Object.assign({}, record);
      let date = form.executionTime.split('~');
      form.startTime = date[0];
      form.endTime = date[1];
      delete form['executionTime'];
      this.form = form;
      this.getShiftDetail(form.bh);
    },
    async getShiftDetail(bh) {
      this.loading = true;
      const res = await getShiftDetail({ bh: bh });
      if (res.code == 1) {
        let { data } = res;
        // 数据构建
        data.map(item => {
          item.day = item.startTime.split(' ')[0];
          item.start = item.startTime.split(' ')[1];
          item.end = item.endTime.split(' ')[1];
          item.diff = Math.round(
            moment(item.endTime).diff(item.startTime, 'hours', true)
          );
        });
        let arr = this.formatterArr(data, 'day');
        this.list = arr;
        this.loading = false;
      }
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          const res = await updateShift(this.form);
          if (res.code == 1) {
            this.$message({
              message: '更新成功',
              iconClass: 'el-icon-success',
              customClass: 'common-message'
            });
            this.getShiftDetail(this.form.bh);
          }
        } else {
          return false;
        }
      });
    },
    formatterArr(arr, group_key) {
      let map = {};
      let res = [];
      for (let i = 0; i < arr.length; i++) {
        let ai = arr[i];
        if (!map[ai[group_key]]) {
          map[ai[group_key]] = [ai];
        } else {
          map[ai[group_key]].push(ai);
        }
      }
      Object.keys(map).forEach(key => {
        res.push({ date: key, arr: map[key] });
      });
      return res;
    },
    handleClose() {
      this.$emit('goPage', 'table');
    }
  }
};
</script>

<style lang="scss" scoped>
.shift-detail {
  position: relative;
  .title {
    position: relative;
    span {
      font-weight: 600;
      margin-left: 10px;
      color: #292b3d;
      font-size: 13px;
    }
    .el-button {
      padding: 3px 8px;
      color: #48556a;
      border-color: #48556a;
      margin-left: 10px;
    }
    &::before {
      position: absolute;
      left: 0px;
      top: 3px;
      content: '';
      width: 2px;
      height: 14px;
      background: #2c67f6;
    }
  }
  .close {
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 20px;
    cursor: pointer;
  }
  .shift-form {
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 22.5px));
    grid-column-gap: 30px;
    justify-content: center;
    ::v-deep .el-form-item__label {
      color: #48556a;
      padding: 0;
    }
    ::v-deep .el-form-item {
      margin-bottom: 10px;
    }
    .el-select,
    .el-date-editor {
      width: 100%;
    }
  }
  .shift-table {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 14.3%);
    border: 1px solid #ededed;
    border-left: none;
    margin: 5px 0;
    .item {
      border-bottom: 1px solid #ededed;
      border-left: 1px solid #ededed;
      .th {
        padding: 5px;
        background: rgb(246, 248, 250);
        border-bottom: 1px solid #ededed;
        h3 {
          font-size: 13px;
          font-weight: 500;
          color: #292b3d;
          margin: 0;
          text-align: center;
        }
        .time {
          display: flex;
          justify-content: space-around;
          span {
            font-size: 12px;
            font-weight: 400;
            color: #606d86;
          }
        }
      }
      .td {
        padding: 8px 15px;
        min-height: 54px;
        .plan {
          height: 38px;
          margin-bottom: 8px;
          padding: 3px 7px;
          font-size: 12px;
          color: #48556a;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          border-radius: 2px 0px 0px 2px;
          background: #f4fbf6;
          border-left: 3px solid #48bb94;
        }
        .plan.blue {
          background: #f4f7fb;
          border-left: 3px solid #2c67f6;
        }
        .plan.purple {
          background: #f1eeff;
          border-left: 3px solid #8773f3;
        }
        &.disabled {
          background-color: rgb(248, 249, 251);
        }
      }
    }
    .item:last-child {
      border-right: 1px solid #ededed;
    }
  }
}
</style>
